<template>
	<view class="container">
		<!-- 渐变背景层 -->
		<view class="gradient-bg"></view>

		<!-- 用户卡片 -->
		<view class="user-card">
			<!-- 头像带光环效果 -->
			<view class="avatar-wrapper">
				<image class="avatar" :src="userInfo.avatar" mode="aspectFill" @click="handleAvatarClick" />
				<view class="halo"></view>
			</view>

			<!-- 用户信息 -->
			<view class="user-meta">
				<text class="username">{{ userInfo.username || ''}}</text>
				<text class="user-bio">{{ userInfo.userType === 0 ? '普通用户' : '搭子用户' }}</text>
			</view>

			<!-- 数据统计 -->
			<view class="stats-grid">
				<view class="stat-item" @click="routeUrl(`/pages/Mine_page/FollowerList/index?id=${userInfo.userid}`)">
					<text class="stat-value">{{userInfo.followingNumbers || 0}}</text>
					<text class="stat-label">粉丝数</text>
				</view>
				<view class="stat-item"
					@click="routeUrl(`/pages/Home_page/details?id=${userInfo.SettledUserid}&type=mine`)">
					<text class="stat-value">{{userInfo.dynamicNumbers || 0}}</text>
					<text class="stat-label">动态数</text>
				</view>
				<view class="stat-item" @click="routeUrl(`/pages/Mine_page/FollowingList/index?id=${userInfo.userid}`)">
					<text class="stat-value">{{userInfo.followNumbers || 0}}</text>
					<text class="stat-label">关注数</text>
				</view>
			</view>
		</view>

		<!-- 详细信息列表 -->
		<view class="detail-list">
			<view class="list-item" v-for="(item, index) in iconOtherList" :key="index"
				@touchstart="linkUrl(index,item)" @touchend="touchEnd(index)"
				:class="{ 'item-active': activeIndex === index }">
				<view class="item-icon-box">
					<!-- <text class="item-icon">{{ item.icon }}</text> -->
					<image :src="item.icon" class="item-icon-box"></image>
				</view>
				<view class="item-content">
					<text class="item-title">{{ item.name }}</text>
				</view>
				<text class="item-arrow">→</text>
			</view>
		</view>
		<kf-popup-qrcode ref="refpopupqrcode" style="width: 100%;"></kf-popup-qrcode>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getUserinfo,
		getSystemConfig
	} from '../../../api/user.js';
	export default {
		data() {
			return {
				activeIndex: -1,
				show: true,
				iconList: [{
					icon: 'moneybagfill',
					color: 'blue',
					badge: 0,
					name: '待接单'
				}, {
					icon: 'presentfill',
					color: 'red',
					badge: 0,
					name: '待上门',
					bindtap: "bindZan"
				}, {
					icon: 'formfill',
					color: 'purple',
					badge: 11,
					name: '待评价',
					bindtap: "showResource"
				}, {
					icon: 'shopfill',
					color: 'green',
					badge: 0,
					name: '返修/售后',
					bindtap: "bindPoint"
				}],
				iconOtherList: [{
					icon: '../../../static/mine_page/lianxikefu.png',
					color: 'blue',
					badge: 0,
					name: '联系客服',
					bindtap: "bindZan",
					url: '/pages/Mine_page/Settled/index'
				}, {
					icon: '../../../static/mine_page/daziruzhu.png',
					color: 'blue',
					badge: 0,
					name: '搭子入驻',
					bindtap: "bindCollect",
					url: '/pages/Mine_page/Settled/index'
				}, {
					icon: '../../../static/mine_page/order.png',
					color: 'blue',
					badge: 0,
					name: '我的订单',
					bindtap: "bindZan",
					url: '/pages/order/lists'
				}, {
					icon: '../../../static/mine_page/shezhi.png',
					color: 'blue',
					badge: 0,
					name: '个人设置',
					bindtap: "bindZan",
					url: '/pages/Mine_page/Setup/index'
				}],
				userInfo: {},
				infoItems: [{
						icon: '../../../static/mine_page/lianxikefu.png',
						title: '联系客服',
						key: 'email',
						color: '#FF6B6B',
						url: ''
					},
					{
						icon: '../../../static/mine_page/daziruzhu.png',
						title: '搭子入驻',
						key: 'phone',
						color: '#4ECDC4',
						url: '/pages/Mine_page/Settled/index'
					},
					{
						icon: '../../../static/mine_page/shezhi.png',
						title: '设置',
						key: 'location',
						color: '#45B7D1',
						url: '/pages/Mine_page/Settled/index'
					}
				]
			}
		},
		onShow() {
			this.getUserinfo();
			this.getSystemConfig();
		},
		methods: {
			/**
			@method 地址跳转
			**/
			linkUrl(index, e) {
				if (index === 0) {
					this.$refs.refpopupqrcode.open({
						title: "温馨提示",
						content: "你好丫",
						cancelText: "错的",
						confirmText: "对的",
						ewm: this.userInfo.qrcode1,
						ewm2: this.userInfo.qrcode2,
						mobileList: [this.userInfo.phone1, this.userInfo.phone2],
						texttip: "长按识别二维码添加客服微信",
						success: () => {
							console.log("对的")
						},
						fail: () => {
							console.log("错的")
						},
						complete: () => {
							console.log("通用")
						},
					})
				} else {
					if (this.userInfo.userType === 1 && e.name == '搭子入驻') {
						this.$refs.uToast.show({
							type: "default",
							title: "提示",
							message: "您已经是搭子用户无需重新申请！",
							iconUrl: "https://uviewui.com/demo/toast/default.png"
						});
					} else {
						uni.navigateTo({
							url: e.url
						});
					}
				}
			},
			//页面跳转
			routeUrl(e) {
				uni.navigateTo({
					url: e
				});
			},
			//获取客服二维码手机号
			async getSystemConfig() {
				try {
					const res = await getSystemConfig({
						type: 'server'
					});

					if (res.code === 200) {
						this.userInfo = {
							...this.userInfo,
							...res.data[0].partnerServer
						};
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			/** 
			@method 获取用户信息
			**/
			async getUserinfo() {
				try {
					const res = await getUserinfo();
					if (res.code == 200) {
						this.userInfo = {
							...this.userInfo,
							...res.data
						};
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			touchStart(index) {
				this.activeIndex = index
			},
			touchEnd() {
				this.activeIndex = -1
			},
			handleAvatarClick() {
				uni.previewImage({
					urls: [this.userInfo.avatar]
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f9fa;
	}

	.container {
		position: relative;
	}

	.gradient-bg {
		height: 380rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.user-card {
		position: relative;
		margin: -200rpx 30rpx 0;
		padding: 40rpx;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.08);
	}

	.avatar-wrapper {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		margin: -100rpx auto 20rpx;

		.avatar {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 4rpx solid #fff;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
			position: relative;
			z-index: 2;
			transition: transform 0.3s ease;

			&:active {
				transform: scale(0.95);
			}
		}

		.halo {
			position: absolute;
			top: -10rpx;
			left: -10rpx;
			right: -10rpx;
			bottom: -10rpx;
			border-radius: 50%;
			background: linear-gradient(45deg, #667eea33, #764ba233);
			animation: haloPulse 2s infinite;
		}
	}

	.user-meta {
		text-align: center;
		margin-bottom: 40rpx;

		.username {
			display: block;
			font-size: 36rpx;
			font-weight: 600;
			color: #2d3436;
			margin-bottom: 12rpx;
		}

		.user-bio {
			font-size: 26rpx;
			color: #636e72;
			line-height: 1.4;
		}
	}

	.stats-grid {
		display: flex;
		justify-content: space-around;
		margin: 30rpx 0;
		padding: 30rpx 0;
		border-top: 1rpx solid #f1f2f6;
		border-bottom: 1rpx solid #f1f2f6;

		.stat-item {
			text-align: center;

			.stat-value {
				display: block;
				font-size: 34rpx;
				font-weight: 600;
				color: #2d3436;
			}

			.stat-label {
				display: block;
				font-size: 24rpx;
				color: #636e72;
				margin-top: 8rpx;
			}
		}
	}

	.detail-list {
		margin: 40rpx 30rpx;

		.list-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			transition: all 0.2s ease;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);

			&.item-active {
				transform: scale(0.98);
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
			}
		}

		.item-icon-box {
			width: 60rpx;
			height: 50rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10rpx;

			.item-icon {
				font-size: 44rpx;
			}
		}

		.item-content {
			flex: 1;

			.item-title {
				display: block;
				font-size: 28rpx;
				color: #2d3436;
				font-weight: 500;
			}

			.item-subtitle {
				display: block;
				font-size: 24rpx;
				color: #636e72;
				margin-top: 8rpx;
			}
		}

		.item-arrow {
			font-size: 36rpx;
			color: #ced6e0;
			margin-left: 20rpx;
			transition: transform 0.2s ease;
		}
	}

	@keyframes haloPulse {
		0% {
			opacity: 0.8;
			transform: scale(1);
		}

		50% {
			opacity: 0.4;
			transform: scale(1.1);
		}

		100% {
			opacity: 0.8;
			transform: scale(1);
		}
	}
</style>